/*
    file：一个是文件(类型是图片格式)，
    w：一个是文件压缩的后宽度，宽度越小，字节越小
*/
export function imageCompress(file: Blob) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()

    reader.onload = async () => {
      resolve(await canvasImage(reader.result))
    }

    reader.onerror = reject

    /* 开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,
  如果设置了onload事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
    reader.readAsDataURL(file)
  })
}

function canvasImage(file: any) {
  return new Promise((resolve, reject) => {
    const img = new Image()
    img.onload = () => {
      // 默认按比例压缩
      const width = img.width > 1024 ? 1024 : img.width
      const height = img.height > 768 ? 768 : img.height
      // const scale = w / h
      const quality = 0.5 // 默认图片质量为0.5
      // 生成canvas
      const canvas = document.createElement('canvas')
      const ctx: any = canvas.getContext('2d')
      // 创建属性节点
      const anw: any = document.createAttribute('width')
      anw.nodeValue = width
      const anh: any = document.createAttribute('height')
      anh.nodeValue = height
      canvas.setAttributeNode(anw)
      canvas.setAttributeNode(anh)
      ctx.drawImage(img, 0, 0, width, height)
      // 图像质量
      // if(obj.quality && obj.quality <= 1 && obj.quality > 0) {
      //   quality = obj.quality
      // }
      // quality值越小，所绘制出的图像越模糊
      const base64Image = canvas.toDataURL('image/jpeg', quality)
      resolve(base64Image)
    }
    img.onerror = reject
    img.src = file
  })
}
